<template>
	<!--创店  -->
	<view class="probeShop">
		<tabbar ref="myTab" @tabsChange="tabsChange" :pageName="pageName" :list="activityList" :current="current"
			:menuButtonInfo="menuButtonInfo"></tabbar>
		<view class="probeShop_content">
			<view class="p_content">
				<swiper class="swiper" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish"
					:style="{height:'calc(100vh - ' + (2*menuButtonInfo.top+198)+ 'rpx)',top: (2*menuButtonInfo.top+198) +'rpx'}">
					<swiper-item class="swiper-item" v-for="(item, index) in activityList" :key="index">
						<scroll-view class="scroll-view" scroll-y @scrolltolower="onreachBottom">
							<view class="scroll-Y">
								<u-waterfall :value="item.delie" ref="uWaterfall" add-time=0>
									<template v-slot:left="{leftList}">
										<view v-for="(item1, index1) in leftList" class="leftList" :key="index1" @click.stop="goActivityDetails(item1.activityId)">
											<view class="swiper-item_box scroll_p_r">
												<view class="swiper-item_box_imgbox">
													<image class="swiper-item_box_imgboxitem" :src="item1.imageList[0]"
														mode="aspectFill"></image>
													<view class="swiper-item_box_imgboxitem_tltlebox">
														<span class="swiper-item_box_imgboxitem_tltleboxtext" v-if="item1.surplusTime != 0">{{item1.surplusTime}}天</span>
														<span class="swiper-item_box_imgboxitem_tltleboxtext" v-else>结束</span>
													</view>
												</view>
												<p class="swiper-item_box_title">{{item1.activityName}}</p>
												<p class="swiper-item_box_furitle">{{item1.desc}}</p>
											</view>
											
										</view>
									</template>
									<template v-slot:right="{rightList}">
										<view v-for="(item1, index1) in rightList" :key="index1" @click.stop="goActivityDetails(item1.activityId)">
											<view class="swiper-item_box scroll_p_r">
												<view class="swiper-item_box_imgbox">
													<image class="swiper-item_box_imgboxitem" :src="item1.imageList[0]"
														mode="aspectFill"></image>
													<view class="swiper-item_box_imgboxitem_tltlebox">
														<span class="swiper-item_box_imgboxitem_tltleboxtext" v-if="item1.surplusTime != 0">{{item1.surplusTime}}天</span>
														<span class="swiper-item_box_imgboxitem_tltleboxtext" v-else>结束</span>
													</view>
												</view>
												<p class="swiper-item_box_title">{{item1.activityName}}</p>
												<p class="swiper-item_box_furitle">{{item1.desc}}</p>
											</view>

										</view>
									</template>
								</u-waterfall>
								<view class="loadBOXS">
									<loading :toast="loadStatus" :title="'暂无活动'"></loading>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<perfectbox :img="imgs" pagepath="../my/setting/setting?login=1" :show="isShow" @ff_show="ff_shows">
		</perfectbox>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import loading from '@/components/loading/loading.vue'
	import perfectbox from "../../components/perfectbox/perfectbox.vue"
	import empty from "../../components/defaultpage/empty.vue"

	export default {
		data() {
			return {
				pageName: "创店",
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				menuButtonInfo: {
					top: 25
				},
				activityList: [{
					name: '推荐',
					categoryId: 'tuijian',
					delie: []
				}],
				imgs: "",

				total: 0, //条数后面用作分页

				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				loadText: {
					loadmore: '已经到底了',
					loading: '努力加载中',
					nomore: '已经到底了'
				},
				loadStatus: 'Loading',
				isBottom: true,
				pageSize: 5,
				pageNums: [1],
				newStatus: ''
			}
		},
		components: {
			tabbar,
			perfectbox,
			tabbar,
			empty,
			loading
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'chimian',
				path: '/pages/probeShop/probeShop'
			}
		},
		onLoad() {

		},
		onShow() {
			this.isShow = Number(uni.getStorageSync('registerToast'));
			console.log('this.isShow--->',this.isShow)
			this.init();
		},
		watch: {
			swiperCurrent(newVal, oldVal) {
				if (newVal != oldVal) {
					this.isBottom = true;
					this.activityListz();
				}
			},

		},
		methods: {
			// 数组去重
			//  方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
			deWeight(arr) {
				var obj = {};
				let newArr = arr.reduce(function(item, next) {
					obj[next.idx] ? '' : obj[next.idx] = true && item.push(next);
					return item;
				}, []);
				return newArr;
			},
			ff_shows() {
				this.isShow = 2;
			},
		init() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// #endif

				// 活动类别
				if (this.activityList.length == 1) {
					this.categoryList().then(res => {
						this.activityListz();


					});

				}
			},
			categoryList() {
				return new Promise((ress, rejj) => {

					this.$apis.categoryList().then(res => {
						// debugger
						let list = JSON.parse(JSON.stringify(this.activityList));
						let newPageNums = JSON.parse(JSON.stringify(this.pageNums));

						// categoryId: 1
						// categoryName: "探店"
						// image: "https://oss-images.lclook.com/upload/2021/09/22/1632279836150.png"
						res.data.forEach(item => {

							list.push({
								name: item.categoryName,
								categoryId: item.categoryId,
								delie: []
							});
							newPageNums.push(1);
						})
						// this.totalNum = JSON.parse(JSON.stringify(totalNum));
						this.activityList = JSON.parse(JSON.stringify(list));
						this.pageNums = JSON.parse(JSON.stringify(newPageNums));
						this.$forceUpdate();

						ress();
					})
				})

			},
			activityListz() {
				let req = {};
				req.pageNum = this.pageNums[this.swiperCurrent];
				// debugger
				req.pageSize = this.pageSize;
				if (this.swiperCurrent == 0) {
					// req.recommend = 1
				} else {
					req.categoryId = this.activityList[this.swiperCurrent].categoryId;
				}
				this.$apis.activityList({
					...req
				}).then(res => {
					if (res.code == 200) {
						if (res.rows.length != 0) {
							let resData = JSON.parse(JSON.stringify(this.activityList));

							let newRow = res.rows;
							newRow.forEach((item, index) => {
								item.surplusTime = this.ffDay(item.timeEnd)
								item.idx = item.activityId;
							})
							resData[this.swiperCurrent].delie = [...resData[this.swiperCurrent].delie, ...newRow];
							resData[this.swiperCurrent].delie = this.deWeight(resData[this.swiperCurrent].delie);


							this.activityList = JSON.parse(JSON.stringify(resData));

							this.$forceUpdate();


							// debugger
							console.log("this.activityList=====>", this.activityList)


							if (res.rows.length < this.pageSize) {
								this.isBottom = false;

								this.loadStatus = 'moduleNomore';
								this.newStatus = this.loadStatus;

							} else {
								this.isBottom = true;

								this.loadStatus = 'moduleNomore';
								this.newStatus = this.loadStatus;

							}
						} else {
							this.isBottom = false;

							this.loadStatus = 'moduleNomore';
							this.newStatus = this.loadStatus;

							if (this.pageNums[this.swiperCurrent] == 1) {
								// debugger;
								this.loadStatus = 'empty';
								this.newStatus = this.loadStatus;
							}
						}

					}

				})
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.myTab.$refs.uTabs.setDx(dx);
				this.loadStatus = 'Loading'
				if (dx == 0) {
					// debugger
					this.loadStatus = this.newStatus;
				}
			},
			// tabs通知swiper切换

			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态

			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.myTab.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom() {
				if (this.isBottom) {
					this.pageNums[this.swiperCurrent]++;
					this.isBottom = false;
					this.loadStatus = "Loading";

					this.activityListz();

				}
			},
			async goActivityDetails(activityId) {
				this.isShow = Number(uni.getStorageSync('registerToast'));
				if (this.isShow == 2) {
					// 去到详情页
					uni.navigateTo({
						url: "activityDetails/activityDetails?activityId=" + activityId
					})
				}
			},
			ffDay(end) {
				let stateTime = new Date().getTime();
				let endTime = new Date(end).getTime();
				let moveTime = endTime - stateTime;
				if (moveTime > 0) {
					let a = moveTime - 2626560000;
					if (a >= 0) {
						return (30 + new Date(a).getDate()) - 1;
					} else {
						return new Date(a).getDate() - 2
					}
				} else {
					return 0
				}
			},
		}
	}
</script>

<style lang="scss">
	.bg_top {
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}

	.z_index {
		z-index: 10;
	}

	.probeShop {}

	.probeShop_top {
		width: 750rpx;
	}

	.probeShop_top_title {
		width: 750rpx;
		font-size: 56rpx;
		font-weight: 700;
		color: #040000;
		line-height: 60rpx;
		padding: 1rpx 0 0 40rpx;
		position: fixed;
	}

	.u-line-1 {
		/*    color: #d1d3d4 !important;
		    font-size: 15px !important; */
		font-weight: 500;

	}

	.probeShop_content {
		margin: 38rpx 0 0 40rpx;
		font-size: 34rpx;
		color: #c8cacc;
		font-weight: 700;
	}

	.probeShop_content_ {
		width: 750rpx;
		position: fixed;
	}

	.probeShop_content_title {
		margin-right: 32rpx;
		display: inline-block;
	}

	.probeShop_content_title_current {
		font-size: 40rpx;
		color: #2d3034;
		;
	}

	.current_bottom {
		margin: 6rpx 0 0 10rpx;
		width: 38rpx;
		height: 6rpx;
		background-color: #f10200;

	}


	.p_content {
		/* margin-top: 34rpx; */
		/* margin-bottom: 36rpx; */
		/* height: calc( 100vh - 290rpx); */
	}

	.swiper {
		width: 100%;
		/* height: 100vh; */
		position: fixed;
		/* z-index: 20; */
		/* left: 0; */
		background-color: #FFFFFF;
		left: 0;
		/* padding: 0 40rpx; */
		box-sizing: border-box;
		/* margin-bottom: 100rpx; */
	}

	.scroll-view {
		width: 100%;
		height: 100%;
		
		box-sizing: border-box;
	}

	.scroll-Y {
		/* margin-top: 36rpx */
		width: 100%;
		padding: 0 40rpx;
		height: 100%;
		box-sizing: border-box;
		/* 		padding-bottom: 300rpx; */
	}

	.scroll-Y_ {
		width: 326rpx;
		display: inline-block;
		margin: 0 18rpx 36rpx 0;
		text-align: right;
	}

	.pM {
		padding-bottom: 36rpx;
	}

	.scroll_p_r {
		display: block;
		position: relative;
		width: 326rpx;
		    padding-bottom: 32rpx;
			float: right;
		// height: 502rpx;
	}

	.loadBOXS {
		transform: translateX(-19rpx);
	}

	.scroll_image {
		width: 100%;
		height: 100%;
		/* height: 502rpx; */
		border-radius: 12rpx;
	}

	.scroll_state {
		width: 309rpx;
		box-sizing: border-box;
		height: 40rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 9rpx;
		left: 9rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		padding-left: 10rpx;
		line-height: 40rpx;
	}

	.scroll_state_bg1 {
		background: linear-gradient(97deg, #f65958, #f10a09 100%);
	}

	.scroll_state_bg2 {
		background: linear-gradient(97deg, #4ea6ff, #1f89f2 100%);
	}

	.scroll_state_bg3 {
		background: linear-gradient(97deg, #adafb2, #a1a3a6 100%);
	}

	.scroll_state view {
		display: inline-block;

	}
	.leftList{
		.scroll_p_r{
			float: left;
		}
		    
	}

	.scroll_state_ {
		line-height: 40rpx;
		font-size: 20rpx;
		position: absolute;
		right: 10rpx;
		/* font-family: nominal; */
	}

	.scroll_state_ image {
		width: 16rpx;
		height: 16rpx;
		margin-left: 4rpx;
	}

	.scroll_title {
		margin-top: 12rpx;
		margin-left: 8rpx;
		font-size: 26rpx;
		color: #2d3034;
		position: relative;
		/* padding-bottom: 36rpx; */
	}

	.scroll_title_view {
		/* margin-top: 12rpx; */
		width: 244rpx;
		display: inline-block;
	}

	.scroll_title_ image {
		width: 62rpx;
		height: 32rpx;
		position: absolute;
		right: 36rpx;
		top: 4rpx;
		/* 		top: 50%;
		transform: translateY(-50%); */
	}

	.scroll_text {
		font-size: 20rpx;
		width: 62rpx;
		height: 32rpx;
		position: absolute;
		right: 15rpx;
		bottom: -3rpx;
	}

	.gongchuang {
		color: #08b293;
	}

	/deep/ .u-tabs-item {
		/* width: 145rpx !important; */
		font-weight: 700 !important;
		letter-spacing: 2rpx;
	}

	.circle {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.circle_ {
		position: absolute;
		left: 50%;
		transform: translateX(-100%);
	}

	.noData {
		font-size: 36rpx;
		font-weight: 500;
		color: #000000;
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-80%, -50%);
	}

	
	.swiper-item_box_imgbox {
		width: 100%;
		position: relative;

		.swiper-item_box_imgboxitem {
			width: 322rpx;
			height: 322rpx;
			box-sizing: border-box;
			display: block;
		}

		.swiper-item_box_imgboxitem_tltlebox {
			width: 80rpx;
			height: 80rpx;
			background: -webkit-linear-gradient(-45deg, #c4292b 50%, #ffffff 50% 100%);
			position: absolute;
			bottom: 0;
			right: 0;

		}

		.swiper-item_box_imgboxitem_tltleboxtext {
			display: inline-block;
			transform: rotateZ(-45deg);
			width: 48rpx;
			height: 48rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 28rpx;
			color: #FFFFFF;
			position: absolute;
			top: 10rpx;
			left: 10rpx;
			text-align: center;
		}

		
	}
	.swiper-item_box_title {
		display: inline-block;
		width: 100%;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 48rpx;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis; //文本溢出显示省略号
		white-space: nowrap; //文本不会换行
	    margin-top: 14rpx;
		margin-bottom: 4rpx;
	}
	.swiper-item_box_furitle{
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 32rpx;
		color: #BBBBBB;
		overflow: hidden;
		text-overflow: ellipsis; //文本溢出显示省略号
		white-space: nowrap; //文本不会换行
	}
	#u-right-column{
		
	}
</style>
